<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../common/top.jsp"%>
<link rel="stylesheet" type="text/css" href="css/categoryPage.css">



<body>
<div class="header">
    <h1 id="myh1">欢迎光临宠物商店!</h1>
</div>

<div class="topnav">
    <!--跳转到目录下的网页。网页大体是一样的，只是展示的商品不一样-->
    <a href="welcome"  target="_self">首页</a>
    <a href="category?categoryId=cat"      id = "cat"      target="_self">猫猫</a>
    <a href="category?categoryId=dog"      id = "dog"      target="_self">狗狗</a>
    <a href="category?categoryId=bird"     id = bird       target="_self">鸟类</a>
    <a href="category?categoryId=pokemon"  id = "pokemon"  target="_self">宝可梦</a>
    <a href="category?categoryId=bugCat" id = "bugCat" target="_self">猫猫虫</a>
    <!--搜索框-->
    <form action="Search" method="post">
        <div class = "searchDiv" id="searchDiv">
            <input type="text" name="searchName" placeholder="请输入想搜索的商品" style="float: left;outline: none;border-style:none; height: 43px;"  id="searchName">
            <input type="submit" name="submitSearch" id="#" value="搜索" class="searchBtn">
            <div id="autoComplete" class="searchComp" style="top: 98px;">
                <li id="autoCompleteLi">
                </li>
            </div>
        </div>
    </form>
    <!--搜索框-->
    <c:if test="${sessionScope.username != null}">
        <a href="space" style="float: right;" target="_self">个人中心</a>
    </c:if>
    <c:if test="${sessionScope.username == null}">
        <a href="login" style="float: right;" target="_self">欢迎登录</a>
    </c:if>
    <a href="cart" style="float: right;" target="_self">购物车</a>
</div>

<div class="mainColumn" style="overflow-x: hidden;overflow-y: scroll;height: 87vh;">
    <div class="showBox">
        <div id="show" class ="Information" style="  position: fixed;
    /*border-style: solid;*/
    /*border-width: 1px;*/
    /*border-color: black;*/
    padding: 5px;
    box-shadow:5px 5px 10px gray;
    text-align: start;
    font-size: 25px;
    border-radius: 5%;
    border:1px solid #9bdf70;
    left:34.5%;
    background-color: #f0fbeb;/*#cfd9df*/
    height: 280px;
    width: 550px;
    top:65%;
    display: none;"></div>

        <div class="TitleStyle">
            <h1>${sessionScope.category.name}</h1>
        </div>
        <div class="TitleStyle">
            <h1>${sessionScope.category.description}</h1>
        </div>


        <c:forEach var="product" items="${sessionScope.productList}">

            <div class="itemBox" style="float:left;" onclick='location.href=("Item?productId=${product.productId}&categoryId=${product.categoryId}")' onmouseover="showInform('${product.inform}')" onmouseout="hideInform()">
                <div class="imgBox" >
                    <a href = "Item?productId=${product.productId}&categoryId=${product.categoryId}">
                    <img src="${product.description}" >
                    </a>
                </div>
                <div class="itemText">
                    <h1>${product.name}</h1>
                    <h4>价格:${product.price}元</h4>
                </div>
            </div>
        </c:forEach>

    </div>
</div>

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="javascripts/autoComplete.js"></script>
<script>
    function showInform(Inform)
    {
        var inform = document.getElementById("show");
        inform.innerText = Inform;
        inform.style.display = 'block';
    }
    function hideInform()
    {
        var informDiv = document.getElementById("show");
        var x=event.clientX;
        var y=event.clientY;
        var divx1 = informDiv.offsetLeft;
        var divy1 = informDiv.offsetTop;
        var divx2 = informDiv.offsetLeft + informDiv.offsetWidth;
        var divy2 = informDiv.offsetTop + informDiv.offsetHeight;
        if( x < divx1 || x > divx2 || y < divy1 || y > divy2)
        {
            document.getElementById("show").style.display='none';
        }
    }

    setSelect();
    function setSelect() {
        var url = location.search; //获取url中"?"符后的字串
        var theRequest = new Object();
        if (url.indexOf("?") !== -1)
        {
            var str = url.substr(1);
            strs = str.split("&");
            for(var i = 0; i < strs.length; i ++) {
                theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
            }
        }
        console.log(theRequest["categoryId"]);
        document.getElementById(theRequest["categoryId"]).setAttribute("class","currentSelect");
    }
</script>
<%@include file="../common/bottom.jsp"%>
